<template>
	<div class="part">
		<div class="part-top">
		    <div class="top-box animate__animated animate__fadeInDown">
		        HAPPY <br>
		          GRADUATION
		    </div>
		</div>
		<div class="num">
		    <div class="num-box">
		        <div class="num1 animate__animated animate__fadeInLeft">
		            <span></span><span></span>
		        </div>
		        <div class="num2 animate__animated animate__fadeInDown">{{"0" + num}}</div>
		        <div class="num3 animate__animated animate__fadeInRight">
		            <span></span><span></span>
		        </div>
		    </div>
		</div>
		<slot name="main1"></slot>
		<slot name="main2"></slot>
		<slot name="main3"></slot>
		<slot name="main4"></slot>
	</div>
</template>

<script>
	export default {
		name: 'part-head',
		props: ['num']
	}
</script>

<style scoped="scoped">
	.part{
	    position: relative;
	    height: 100vh;
	    background: #2C9DA9;
	}
	.part-top{
	    width: 100vw;
	    height: 8vh;
		padding-top: 1em;
	    display: flex;
	    justify-content: center;
	    align-items: center;
		overflow: hidden;
	}
	.top-box{
	    line-height: 1.875rem;
	    width: 80vw;
	    color: white;
	    font-size: 1.2em;
		font-weight: bold;
	    text-align: center;
	}
	.num{
	    width: 100vw;
	    height: 10vh;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	}
	.num-box{
	    width: 80vw;
	    color: white;
	    font-size: 1.25rem;
	    text-align: center;
	    display: flex;
	    justify-content: space-between;
	}
	.num2{
	    width: 10vw;
	    height: 10vw;
	    border-radius: 50%;
	    background: white;
	    color: green;
	    font-size: 1.25rem;
	    text-align: center;
	    line-height: 10vw;
	}
	.num1{
	    display: flex;
	}
	.num1 span:nth-child(1){
	    display: inline-block;
	    width: 25vw;
	    height: 0.5vw;
	    align-self: center;
	    background: white;
	}
	.num1 span:nth-child(2){
	    display: inline-block;
	    width: 5vw;
	    height: 5vw;
	    align-self: center;
	    border-radius: 50%;
	    background: white;
	}
	.num3{
	    display: flex;
	}
	.num3 span:nth-child(2){
	    display: inline-block;
	    width: 25vw;
	    height: 0.5vw;
	    align-self: center;
	    background: white;
	}
	.num3 span:nth-child(1){
	    display: inline-block;
	    align-self: center;
	
	    width: 5vw;
	    height: 5vw;
	    border-radius: 50%;
	    background: white;
	}
</style>
